<template>  
  <ColorPicker is-widget use-type="both" v-model="color" v-model:gradientColor="gradientColor"></ColorPicker>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, computed } from  'vue';
import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";

export default defineComponent({
  name: 'ColorInput',
  components:{
    ColorPicker 
  },
  props: {
    color: {
      type: String,
      default: () => {
        return '#0ffcc0'
      }
    },
    gradientColor: {
      type: String,
      default: () => {
        return 'linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)'
      }
    }
  },
  emits: ['update:color'],
  setup (props, context) {
    //解构
    const {
      color,
      gradientColor
    } = toRefs(props);

    return{
      color,
      gradientColor
    }
  }
})
</script>

<style lang="scss" scoped>

</style>